<template>
  <div class="home">
    <div class="context">
      <div class="c_header">
        <div class="c_left">
          <div class="c_item" v-for="item in listDate">
            <div class="avatars">
              <el-avatar shape="square" size="large" :src="item.imgUrl">
              </el-avatar>
            </div>
            <div class="avatars">
              <div class="span" @click="btnhead(item.inviteCode)">
                <span>
                  <el-link>{{ item.inviteTitle }}</el-link>
                </span>
              </div>
              <div class="b">
                <span>访问量：{{ item.num }}</span>
                <span>创建时间：{{ item.bytime }}</span>
              </div>
            </div>
          </div>
          <div class="pagination">
            <el-pagination
              background
              layout="prev, pager, next"
              page-size="14"
              @current-change="handleCurrentChange"
              :current-page="this.pageNum"
              :total="this.total"
            />
          </div>
        </div>

        <div class="c-right">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span><i class="el-icon-info"></i>论坛公告</span>
              <el-button
                style="float: right; padding: 3px 0"
                type="text"
                @click="gongGao"
                >更多</el-button
              >
            </div>
            <div
              v-for="(o, index) in ListData4"
              :key="index"
              class="text item"
              v-if="index < 6"
            >
              <i class="el-icon-connection"></i>
              <el-link type="primary" @click="btnhead(o.inviteCode)">{{
                o.inviteTitle
              }}</el-link>
              <div style="width: 100%; height: 1px; background: #ccc"></div>
            </div>
          </el-card>
        </div>
      </div>
      <!-- 中间 -->
      <div class="lieb">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane
            :label="item.title"
            :name="item.name"
            v-for="(item, index) in List"
            :key="index"
          >
            <div class="ul" v-for="(a, num) in item.datalist" v-if="num < 8">
              <el-avatar
                class="ul_eav"
                fit="fill"
                :size="35"
                :src="a.imgUrl"
              ></el-avatar>
              <span class="span" @click="btnhead(a.inviteCode)">
                <el-link type="danger"> {{ a.inviteTitle }}</el-link>
              </span>
              <div class="li">
                <span>浏览：{{ a.num }}</span>
                <span>评论：{{ a.pinglunNum }}</span>
                <span>时间：{{ a.bytime }}</span>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
      <div class="wrapper">
        <div class="models">
          <div class="models_header">
            <span class="mh_a"><i class="el-icon-question"></i> 问题</span>
            <!-- <span class="mh_b" @click="btn1">更多</span> -->
          </div>
          <div class="models_content">
            <ul>
              <li
                v-for="(o, index) in ListData1"
                :key="index"
                v-if="index < 15"
              >
                <el-avatar
                  shape="square"
                  :size="25"
                  :src="o.imgUrl"
                ></el-avatar>
                <span class="mc_text" @click="btnhead(o.inviteCode)">{{
                  o.inviteTitle
                }}</span>
              </li>
            </ul>
          </div>
        </div>

        <div class="models">
          <div class="models_header">
            <span class="mh_a"><i class="el-icon-info"></i>思绪</span>
            <!-- <span class="mh_b" @click="btn2">更多</span> -->
          </div>
          <div class="models_content">
            <ul>
              <li
                v-for="(o, index) in ListData2"
                :key="index"
                v-if="index < 15"
              >
                <el-avatar
                  shape="square"
                  :size="25"
                  :src="o.imgUrl"
                ></el-avatar>
                <span class="mc_text" @click="btnhead(o.inviteCode)">{{
                  o.inviteTitle
                }}</span>
              </li>
            </ul>
          </div>
        </div>
        <div class="models">
          <div class="models_header">
            <span class="mh_a"><i class="el-icon-s-promotion"></i>分享</span>
            <!-- <span class="mh_b" @click="btn3">更多</span> -->
          </div>
          <div class="models_content">
            <ul>
              <li
                v-for="(o, index) in ListData3"
                :key="index"
                v-if="index < 15"
              >
                <el-avatar
                  shape="square"
                  :size="25"
                  :src="o.imgUrl"
                ></el-avatar>
                <span class="mc_text" @click="btnhead(o.inviteCode)">{{
                  o.inviteTitle
                }}</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div style="height: 100px"></div>
  </div>
</template>
<script>
import { getListDate,getNewListData,getReListData,getListDataByType } from "../api/cate";
export default {
  name: "homePage",
  data() {
    return {
      activeName: "frist",
      List: [
        {
          title: "最热",
          name: "frist",
          datalist: [
          ],
        },
        { title: "最新", name: "five", datalist: [] },
      ],
      //每页的帖子
      listDate: [],
      //问题帖子
      ListData1: [],
      //思想帖子
      ListData2: [],
      //分享帖子
      ListData3: [],
      //公告帖子
      ListData4: [],
      pageSize: 14, //页面帖子数量
      pageNum: 1, //当前帖子页数默认为1
      total: 100, //帖子总数
    };
  },
  activated: function () {
    this.getData();
    this.getNew();
    this.getRe();
    // this.getGongGao();
  },
  methods: {
    //换页时获取当前页面数据
    handleCurrentChange(val) {
      this.pageNum = val;
      let obj = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      };
      getListDate(obj).then(
        (res) => {
          if (res.data.code === 200) {
            this.listDate = res.data.data.ListData;
            this.total = res.data.data.total;
          } else {
            this.$message.error("获取帖子失败...");
          }
        },
        (error) => {
          this.$message.error("获取帖子失败...");
        }
      );
    },
    getData() {
      let obj = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      };
      //模块1获取所有帖子信息，通过向后端传递当前页面来获取，返回帖子总数和当前页的帖子
      getListDate(obj).then(
        (res) => {
          if (res.data.code === 200) {
            this.listDate = res.data.data.ListData;
            this.total = res.data.data.total;
          } else {
            this.$message.error("获取帖子失败...");
          }
        },
        (error) => {
          this.$message.error("获取帖子失败...");
        }
      );
      //获取问题帖子前15个，按照时间顺序
      let obj1 = {
        pageSize: 15,
        type: "问题",
      };
      //获取问题帖子
      getListDataByType(obj1).then((res) => {
        if (res.data.code === 200) {
          //   console.log(res.data.data.list);
          this.ListData1 = res.data.data.ListData;
          //   this.loading.endLoading();
        } else {
          this.$message.error("查询失败失败");
          //  res.data.data.list
        }
      });
      //思绪
      let obj2 = {
        pageSize: 15,
        type: "思绪",
      };
      getListDataByType(obj2).then((res) => {
        if (res.data.code === 200) {
          //   console.log(res.data.data.list);
          this.ListData2 = res.data.data.ListData;
          //   this.loading.endLoading();
        } else {
          this.$message.error("查询失败失败");
          //  res.data.data.list
        }
      });
        //分享
      let obj3 = {
        pageSize: 15,
        type: "分享",
      };
     getListDataByType(obj3).then((res) => {
        if (res.data.code === 200) {
          //   console.log(res.data.data.list);
          this.ListData3 = res.data.data.ListData;
          //   this.loading.endLoading();
        } else {
          this.$message.error("查询失败失败");
          //  res.data.data.list
        }
      });
      //公告
       let obj4 = {
        pageSize: 15,
        type: "公告",
      };
       getListDataByType(obj3).then((res) => {
        if (res.data.code === 200) {
          //   console.log(res.data.data.list);
          this.ListData4 = res.data.data.ListData;
          //   this.loading.endLoading();
        } else {
          this.$message.error("查询失败失败");
          //  res.data.data.list
        }
      });

    },

    //最新
    getNew() {
      getNewListData().then((res) => {
        if (res.data.code === 200) {
          this.List[1].datalist = res.data.data.ListData;
          this.List[1].datalist.sort((a, b) => {
            let atime = a.bytime;
            let btime = b.bytime;
            let atimes = new Date(atime).getTime();
            let btimes = new Date(btime).getTime();
            return btimes - atimes;
          });
          console.log(this.List)
          this.loading.endLoading();
        } else {
          this.$message.error("查询失败失败");
          //  res.data.data.list
          this.loading.endLoading();
        }
      });
    },
    //最热
    getRe() {
     getReListData().then((res) => {
        if (res.data.code === 200) {
          this.List[0].datalist = res.data.data.ListData;
          this.List[0].datalist.sort((a, b) => {
            return a.pinglunNum < b.pinglunNum;
          });
          this.loading.endLoading();
        } else {
          this.$message.error("查询失败失败");
          //  res.data.data.list
          this.loading.endLoading();
        }
      });
    },

    handleClick(tab, event) {
      console.log(tab.name);
      console.log(event);
      if (tab.name == "five") {
        this.getNew();
      } else {
        this.getRe();
      }
    },
    //帖子页面
    btnhead(val) {
      console.log(val);
      // this.$router.go(0)
      this.$router.replace({
        path: "/show",
        query: {
          inviteCode: val,
        },
      });
    },
    gongGao() {
      this.$router.push("/tu6");
    },
    btn1() {
      this.$router.push("/tu2");
    },
    btn2() {
      this.$router.push("/tu4");
    },
    btn3() {
      this.$router.push("/tu5");
    },
  },
};
</script>

<style scoped>
.home {
  background-image: url(https://static.hacpai.com/images/holiday/blockchain-bg.png);
  /* background: rgba(204, 204, 204, 0.246); */
  width: 100%;
  height: 700px;
  text-align: center;
  margin: 0 auto;
  overflow: auto;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.context {
  padding: 20px;
  background: #fff;
  padding-top: 20px;
  width: 80%;
  margin: 0 auto;
}
.c_left {
  float: left;
  width: 70%;
}
.c_header {
  width: 100%;
  height: 380px;
}
.c-right {
  width: 30%;
  float: left;
  right: 0;
}
.c_item {
  width: 50%;
  height: 50px;
  float: left;
}
.avatars {
  height: 50px;
  float: left;
}
.avatars el-avatar {
  padding-top: 10px;
}
.avatars .span {
  height: 50%;
  padding-left: 5px;
  width: 280px;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
.avatars .b {
  height: 50%;
  color: rgba(12, 47, 245, 0.52);
  padding-left: 5px;
  width: 280px;
  text-align: left;
  font-size: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ul {
  width: 100%;
  height: 40px;
  line-height: 50px;
  text-align: left;
  border-bottom: 1px solid #ccc;
  padding-top: 10px;
  padding-bottom: 10px;
}
.ul .span {
  font-size: 18px;
  padding-left: 10px;
  line-height: 50px;
  cursor: pointer;
}
.ul_eav {
  float: left;
}
.ul .li {
  float: right;
  padding-right: 10px;
}
.lieb {
  margin-top: 50px;
  padding-left: 10px;
  width: 99%;
  height: 550px;
  background: rgba(32, 173, 116, 0.253);
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.wrapper {
  width: 100%;
  margin: 0 auto;
  display: flex;
}
.models {
  float: left;
  margin-top: 20px;
  width: 33%;
  /* background: rgba(226, 241, 172, 0.76); */
}
.models_header {
  font-size: 13px;
  width: 100%;
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #ccc;
}
.mh_a {
  padding-left: 20px;
  float: left;
  font-weight: 400;
}
.mh_b {
  padding-right: 20px;
  float: right;
  font-weight: 200;
  color: blue;
  cursor: pointer;
}
.models_content {
  width: 100%;
}
.models_content ul {
  display: block;
  list-style-type: disc;
}
.models_content ul li {
  /* padding-top: 20px; */
  list-style: none outside none;
  display: flex;
  height: 40px;
  align-items: center;
}

.mc_text {
  width: 300px;
  padding-left: 10px;
  text-align: left;
  font-size: 10px;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text {
  cursor: pointer;
  text-align: left;
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}
.clearfix {
  width: 100%;
  text-align: left;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  background: rgb(242, 245, 212);
  right: 0;
  width: 320px;
}
.pagination {
  width: 50%;
  height: 50px;
  margin-top: 44%;
}
</style>
